import './index.scss';
import {useEffect} from "react";
import * as echarts from "echarts";

const CallTrend = () => {

    useEffect(() => {
        init()
    }, [])

    function init() {
        // 初始化echarts实例，将其挂载到id为main的dom元素上展示
        let myChart = echarts.init(document.getElementById("ct-echart"));
        let option = {
            tooltip: {
                trigger: 'axis',
            },
            color: ['#3DE6FF'],
            grid: {
                bottom: '84',
                left: '60',
                top: '20',
                right: '40'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: 'rgba(255,255,255,0.65)',
                    fontSize: 12
                },
                data: ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07', '01/08', '01/09', '01/10', '01/11', '01/12']
            },
            yAxis: {
                type: 'value',
                splitLine: {// 分隔线
                    show: true,
                    lineStyle: {
                        type: 'dotted',
                        color: 'rgba(255,255,255,0.2)'
                    },
                },
                axisLabel: {
                    color: 'rgba(255,255,255,0.65)',
                    fontSize: 12
                }
            },
            series: [
                {
                    name: '调用量',
                    data: [820, 932, 901, 934, 1290, 1330, 1320,1900,1700,1600,1400,1540],
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,  color: 'rgba(54,161,255,0.6)'  // 100% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(25,104,255,0)' //   0% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    smooth: true,
                    symbol: 'none',
                    lineStyle : {
                        color : '#3DE6FF',
                        width : 1,  //设置曲线宽度
                        type : 'solid',
                    },
                }
            ]
        };
        // 绘制图表
        myChart.setOption(option);
    }

    return (
        <div className='ct-container'>
            <div className='ct-title'>调用趋势</div>
            <div id='ct-echart' className='ct-echart'/>
        </div>
    )
}

export default CallTrend;
